{% extends 'base.html' %}
{% load static %}

{% block head %}
<link rel="stylesheet" href="{% static 'css/projects/index.css' %}">
<title>Мои проекты</title>
{% endblock head %}

{% block content %}

{% if user.role == "Ученик" %}
<a class="new-project-link" href="{% url 'create' %}">
    Новый проект
    <svg width="20" height="20" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"
        style="transform: rotate(45deg)">
        <path
            d="m114 100 49-49a9.9 9.9 0 0 0-14-14l-49 49-49-49a9.9 9.9 0 0 0-14 14l49 49-49 49a9.9 9.9 0 0 0 14 14l49-49 49 49a9.9 9.9 0 0 0 14-14Z"
            fill="#FFFFFF"></path>
    </svg></a>
{% endif %}
{% if not has_projects %}
<div class="no-projects">
    <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="no-projects-svg">
        <g data-name="01" id="_01">
            <path
                d="M27.71,9.71,23,14.41,18.29,9.71l1.41-1.41L23,11.59l3.29-3.29Zm-14,0L12.29,8.29,9,11.59,5.71,8.29,4.29,9.71,9,14.41ZM9,24H23V22H9Zm20.36-7.51a2.64,2.64,0,1,1-4.73,0L27,11.76Zm-1.79.89L27,16.24l-.58,1.15a.64.64,0,1,0,1.15,0Z" />
        </g>
    </svg>
    <span class="no-projects-span">У вас ещё ни одного проекта...</span>
</div>
{% else %}
{% if user.role == "Учитель" or user.role == 'Администратор' %}
<div class="main-nav">
    <div class="top-nav">
        <div class="search">
            <input class="search-input" type="text" placeholder="Поиск..." name="search_names"
                value="{% if name_filter_have %}{{ name_filter }}{% endif %}" 
                oninput="filter(this.value);" >
        </div>
    </div>
    <div class="filter">
        {% csrf_token %}
        <div class="div-list">
            <p class="list-name">Группа:</p>
            <div class="list-names">
                {% if group_filter_have %}
                <p class="list-p" id="filter-group">{{ group_filter }}</p>
                {% else %}
                <p class="list-p" id="filter-group" onchange="filter();">Не указано</p>
                {% endif %}
                <ul class="list">
                    <li class="list-li">Не указано</li>
                    <li class="list-li">1</li>
                    <li class="list-li">2</li>
                    <li class="list-li">3</li>
                    <li class="list-li">4</li>
                    <li class="list-li">5</li>
                    <li class="list-li">6</li>
                    <li class="list-li">7</li>
                    <li class="list-li">10</li>
                    <li class="list-li">11</li>
                    <li class="list-li">12</li>
                    <li class="list-li">13</li>
                    <li class="list-li">14</li>
                    <li class="list-li">15</li>
                    <li class="list-li">16</li>
                    <li class="list-li">17</li>
                    <li class="list-li">20</li>
                    <li class="list-li">21</li>
                    <li class="list-li">22</li>
                    <li class="list-li">23</li>
                    <li class="list-li">24</li>
                    <li class="list-li">25</li>
                    <li class="list-li">26</li>
                    <li class="list-li">27</li>
                </ul>
            </div>
        </div>    
        <div class="div-list">
            <p class="list-name">Тип проекта:</p>
            <div class="list-names">
                {% if role_filter_have %}
                <p class="list-p" id="filter-role">{{ role_filter }}</p>
                {% else %}
                <p class="list-p" id="filter-role" onchange="filter();">Не указано</p>
                {% endif %}
                <ul class="list sub-list">
                    <li class="list-li">Не указано</li>
                    <li class="list-li">НОУ</li>
                    <li class="list-li">Проект</li>
                </ul>
            </div>
        </div>
        <input type="number" class="input-filter input-filter-group" name="group_filter" >
        <input type="text" class="input-filter input-filter-type" name="type_filter" >

    </div>
</div>
{% endif %}
<div class="content">
    {% for project in projects %}
        {% if project.get_status == 'send request' %}
            <a class="project project{{project.id}} send-request" href="./?id={{ project.id }}">
                <div class="anim anim-send-request">
                    <div class="ball"></div>
                    <div class="ball"></div>
                    <div class="ball"></div>
                </div>
                <div class="project-content">
                    <h2 class="title">{{ project.name }}</h2>
                    <span class="subtitle">{{ project.subjects }}</span>
                    {% if user.role == 'Ученик' %}
                    <span>{{ project.teacher.get_full_name }}</span>
                    {% else %}
                    <span class="student">{{ project.student.getPName }}</span>
                    <span hidden class="student-group">{{project.student.group}}</span>
                    {% endif %}
                    <span hidden class="project-type">{{project.get_level}}</span>
                </div>
            </a>
            <!-- для проектов на этапе разработки -->
        {% elif project.get_status == 'on work' %}
            <a class="project project{{project.id}} on-work" href="./?id={{ project.id }}">
                <div class="anim-on-work">
                    <div class="gear gear1">
                        <svg enable-background="new 0 0 32 32" version="1.1" viewBox="0 0 32 32" xml:space="preserve" fill="#cf9518" width="60px"><path d="M27.526,18.036L27,17.732c-0.626-0.361-1-1.009-1-1.732s0.374-1.371,1-1.732l0.526-0.304  c1.436-0.83,1.927-2.662,1.098-4.098l-1-1.732c-0.827-1.433-2.666-1.925-4.098-1.098L23,7.339c-0.626,0.362-1.375,0.362-2,0  c-0.626-0.362-1-1.009-1-1.732V5c0-1.654-1.346-3-3-3h-2c-1.654,0-3,1.346-3,3v0.608c0,0.723-0.374,1.37-1,1.732  c-0.626,0.361-1.374,0.362-2,0L8.474,7.036C7.042,6.209,5.203,6.701,4.375,8.134l-1,1.732c-0.829,1.436-0.338,3.269,1.098,4.098  L5,14.268C5.626,14.629,6,15.277,6,16s-0.374,1.371-1,1.732l-0.526,0.304c-1.436,0.829-1.927,2.662-1.098,4.098l1,1.732  c0.828,1.433,2.667,1.925,4.098,1.098L9,24.661c0.626-0.363,1.374-0.361,2,0c0.626,0.362,1,1.009,1,1.732V27c0,1.654,1.346,3,3,3h2  c1.654,0,3-1.346,3-3v-0.608c0-0.723,0.374-1.37,1-1.732c0.625-0.361,1.374-0.362,2,0l0.526,0.304  c1.432,0.826,3.271,0.334,4.098-1.098l1-1.732C29.453,20.698,28.962,18.865,27.526,18.036z M16,21c-2.757,0-5-2.243-5-5s2.243-5,5-5  s5,2.243,5,5S18.757,21,16,21z"/></svg>
                    </div>
                    <div class="gear gear2">
                        <svg enable-background="new 0 0 32 32" version="1.1" viewBox="0 0 32 32" xml:space="preserve" fill="#cf9518" width="72px"><path d="M27.526,18.036L27,17.732c-0.626-0.361-1-1.009-1-1.732s0.374-1.371,1-1.732l0.526-0.304  c1.436-0.83,1.927-2.662,1.098-4.098l-1-1.732c-0.827-1.433-2.666-1.925-4.098-1.098L23,7.339c-0.626,0.362-1.375,0.362-2,0  c-0.626-0.362-1-1.009-1-1.732V5c0-1.654-1.346-3-3-3h-2c-1.654,0-3,1.346-3,3v0.608c0,0.723-0.374,1.37-1,1.732  c-0.626,0.361-1.374,0.362-2,0L8.474,7.036C7.042,6.209,5.203,6.701,4.375,8.134l-1,1.732c-0.829,1.436-0.338,3.269,1.098,4.098  L5,14.268C5.626,14.629,6,15.277,6,16s-0.374,1.371-1,1.732l-0.526,0.304c-1.436,0.829-1.927,2.662-1.098,4.098l1,1.732  c0.828,1.433,2.667,1.925,4.098,1.098L9,24.661c0.626-0.363,1.374-0.361,2,0c0.626,0.362,1,1.009,1,1.732V27c0,1.654,1.346,3,3,3h2  c1.654,0,3-1.346,3-3v-0.608c0-0.723,0.374-1.37,1-1.732c0.625-0.361,1.374-0.362,2,0l0.526,0.304  c1.432,0.826,3.271,0.334,4.098-1.098l1-1.732C29.453,20.698,28.962,18.865,27.526,18.036z M16,21c-2.757,0-5-2.243-5-5s2.243-5,5-5  s5,2.243,5,5S18.757,21,16,21z"/></svg>
                    </div>
                    <div class="gear gear3">
                        <svg enable-background="new 0 0 32 32" version="1.1" viewBox="0 0 32 32" xml:space="preserve" fill="#cf9518" width="60px"><path d="M27.526,18.036L27,17.732c-0.626-0.361-1-1.009-1-1.732s0.374-1.371,1-1.732l0.526-0.304  c1.436-0.83,1.927-2.662,1.098-4.098l-1-1.732c-0.827-1.433-2.666-1.925-4.098-1.098L23,7.339c-0.626,0.362-1.375,0.362-2,0  c-0.626-0.362-1-1.009-1-1.732V5c0-1.654-1.346-3-3-3h-2c-1.654,0-3,1.346-3,3v0.608c0,0.723-0.374,1.37-1,1.732  c-0.626,0.361-1.374,0.362-2,0L8.474,7.036C7.042,6.209,5.203,6.701,4.375,8.134l-1,1.732c-0.829,1.436-0.338,3.269,1.098,4.098  L5,14.268C5.626,14.629,6,15.277,6,16s-0.374,1.371-1,1.732l-0.526,0.304c-1.436,0.829-1.927,2.662-1.098,4.098l1,1.732  c0.828,1.433,2.667,1.925,4.098,1.098L9,24.661c0.626-0.363,1.374-0.361,2,0c0.626,0.362,1,1.009,1,1.732V27c0,1.654,1.346,3,3,3h2  c1.654,0,3-1.346,3-3v-0.608c0-0.723,0.374-1.37,1-1.732c0.625-0.361,1.374-0.362,2,0l0.526,0.304  c1.432,0.826,3.271,0.334,4.098-1.098l1-1.732C29.453,20.698,28.962,18.865,27.526,18.036z M16,21c-2.757,0-5-2.243-5-5s2.243-5,5-5  s5,2.243,5,5S18.757,21,16,21z"/></svg>
                    </div>
                </div>
                <div class="project-content">
                    <h2 class="title">{{ project.name }}</h2>
                    <span class="subtitle">{{ project.type }} <div class="sub-ball"></div> {{ project.subjects }}</span>
                    {% if user.role == 'Ученик' %}
                    <span>{{ project.teacher.get_full_name }}</span>
                    {% else %}
                    <span class="student">{{ project.student.getPName }}</span>
                    <span hidden class="student-group">{{project.student.group}}</span>
                    {% endif %}
                    <span hidden class="project-type">{{project.get_level}}</span>
                </div>
            </a>
        {% elif project.get_status == 'done' %}
            <!-- для выполненных проектов -->
            <a class="project project{{project.id}} done" href="./?id={{ project.id }}">
                <div class="anim-done">
                    <div class="dn">
                        <svg class="dn-svg" style="enable-background:new 0 0 24 24;" version="1.1" viewBox="5 4 15 15" xml:space="preserve" fill="#129c3c"> <g/><g><path d="M18.3,6.3L9.1,16.4l-2.3-3c-0.3-0.4-1-0.5-1.4-0.2c-0.4,0.3-0.5,1-0.2,1.4l3,4C8.4,18.8,8.7,19,9,19c0,0,0,0,0,0   c0.3,0,0.5-0.1,0.7-0.3l10-11c0.4-0.4,0.3-1-0.1-1.4C19.3,5.9,18.6,5.9,18.3,6.3z"/></g> </svg>
                    </div>
                    <div class="dn">
                        <svg class="dn-svg" style="enable-background:new 5 4 15 15;" version="1.1" viewBox="5 4 15 15" xml:space="preserve" fill="#129c3c"> <g/><g><path d="M18.3,6.3L9.1,16.4l-2.3-3c-0.3-0.4-1-0.5-1.4-0.2c-0.4,0.3-0.5,1-0.2,1.4l3,4C8.4,18.8,8.7,19,9,19c0,0,0,0,0,0   c0.3,0,0.5-0.1,0.7-0.3l10-11c0.4-0.4,0.3-1-0.1-1.4C19.3,5.9,18.6,5.9,18.3,6.3z"/></g> </svg>
                    </div>
                    <div class="dn">
                        <svg class="dn-svg" style="enable-background:new 5 4 15 15;" version="1.1" viewBox="5 4 15 15" xml:space="preserve" fill="#129c3c"> <g/><g><path d="M18.3,6.3L9.1,16.4l-2.3-3c-0.3-0.4-1-0.5-1.4-0.2c-0.4,0.3-0.5,1-0.2,1.4l3,4C8.4,18.8,8.7,19,9,19c0,0,0,0,0,0   c0.3,0,0.5-0.1,0.7-0.3l10-11c0.4-0.4,0.3-1-0.1-1.4C19.3,5.9,18.6,5.9,18.3,6.3z"/></g> </svg>
                    </div>
                </div>
                <div class="project-content">
                    <h2 class="title">{{ project.name }}</h2>
                    <span class="subtitle">{{ project.type }} <div class="sub-ball"></div> {{ project.subjects }}</span>
                    {% if user.role == 'Ученик' %}
                    <span>{{ project.teacher.get_full_name }}</span>
                    {% else %}
                    <span class="student">{{ project.student.getPName }}</span>
                    <span hidden class="student-group">{{project.student.group}}</span>
                    {% endif %}
                    <span hidden class="project-type">{{project.get_level}}</span>
                </div>
            </a>
        {% endif %}    
    {% endfor %}
</div>

<script src="{% static 'js/projects/index.js' %}"></script>
<script src="{% static 'js/global/list.js' %}"></script>
{% endif %}
{% endblock %}